<template>
  <section class="sp-dialog">
    <el-dialog
      :visible.sync="show"
      :width="width"
      :title="title"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :show-close="true"
      custom-class="sp-dialog"
      @close="close"
    >
      <slot></slot>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="submit" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
export default {
  name: 'SpDialog',
  components: {},
  props: {
    width: {
      type: String,
      default: '1000px'
    },
    title: {
      type: String,
      default: '车辆效果图'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      show: false,
      options: {}
    }
  },
  watch: {
    visible () {
      console.log('visible', this.visible)
      this.show = this.visible
    }
  },
  created () {},
  mounted () {},
  destroyed () {},
  methods: {
    // emit
    close () {
      this.show = false
      this.$emit('cancel')
    },
    cancel () {
      this.show = false
      this.$emit('cancel')
    },
    submit () {
      this.$emit('submit')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
